<template>
    <div class="category">
        <Button type="primary" @click="showModal">分类管理</Button>
        <Modal v-model="modal.show" :title="modal.title">
            <Form :label-width="100" :model="formValidate" ref="formValidate">
                <div v-for="(item, index) in formValidate.categoryList" :key="index">
                    <Row class="flex-between">
                        <Col span="19">
                            <FormItem
                                label="分类名称："
                                :prop="'categoryList.' + index + '.category'"
                                :rules="{required: item.edit, message: '不能为空', trigger: 'change'}">
                                <Input type="textarea" :maxlength="200" v-model.trim="item.category" placeholder="请输入提示内容" v-if="item.edit"></Input>
                                <span v-if="!item.edit" style="word-break:break-all;margin-top:10px;">{{item.category}}</span>
                            </FormItem>
                        </Col>
                        <Col span="5" offset="1" class="btn-group">
                            <Button @click="saveCategory(item, true)" v-if="item.edit" size="small" type="primary">确定</Button>
                            <Button @click="item.edit = true" v-if="!item.edit" size="small" type="primary">修改</Button>
                            <Button @click="removeCategory(index)" v-if="!item.id" size="small" type="error">删除</Button> 
                            <Button @click="delCategory(item.id)" v-if="item.id" size="small" type="error">删除</Button>
                        </Col>
                    </Row>
                    <Divider dashed style="margin-top:0px;"/>
                </div>
                <FormItem>
                    <Row>
                        <Col span="12">
                            <Button type="primary" ghost long @click="addCategory" icon="md-add" :disabled="formValidate.categoryList.some(item => !item.id)">添加</Button>
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import { addCategory, updateCategory, delCategory, queryCategory } from '../api/category.js'
    export default {
        name:'Category',
        data(){
            return {
                query:{
                    pageIndex:1,
                    pageSize:10
                },
                modal:{
                    show:false,
                    title:'分类管理'
                },
                formValidate:{
					categoryList:[]
				}
            }
        },
        methods:{
            showModal(){
                this.modal.show = true;
                this.queryCategory()
            },
            addCategory(){
				this.index ++ ;
				this.categoryList.push({
					index:this.index,
					category:'',
					edit:true
				})
			},
			removeCategory(index){
				this.categoryList.splice(this.categoryList.findIndex(category => category.index === index), 1)
			},
			queryCategory(){
				queryCategory(this.query).then(data => {
					if(data.code == 1){
						this.categoryList = data.data.items || data.data;
						this.formValidate.categoryList = data.data.items || data.data;
						this.categoryList.forEach(category => {
							this.$set(category,'edit',false);
						})
						if(data.data.items){
							this.index = data.data.items.length;
						}
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			delCategory(id){
				delCategory(id).then(data => {
					if(data.code == 1){
						this.$Message.info('删除成功');
						this.queryCategory();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			updateCategory(){
				if(this.category.category == ''){
					this.$Message.warning('提示内容不能为空');
					return
				}
				updateCategory(this.category).then(data => {
					if(data.code == 1){
						this.$Message.info('修改成功');
						this.queryCategory();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			createCategory(){
				if(this.category.category == ''){
					this.$Message.warning('提示内容不能为空');
					return
				}
				addCategory(this.category).then(data => {
//					this.cancelLoading('CategoryModal');
					if(data.code == 1){
						this.$Message.info('创建成功');
						this.queryCategory();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			// 判断传入的时间字符串是否在当前时间之前
			isBeforeTimestamp(dataStr) {
				return new Date(dataStr) <= new Date()
			},
			saveCategory(category, noValidation){
				this.category = category;
//				this.$refs['formValidate'].validate((valid) => {
//          		if (valid) {
            			if(!category.id){
            				this.createCategory();
            			}else{
            				this.updateCategory()
            			}
//          		}else{
//          			this.cancelLoading('ctfModal');
//          		}
//          	})
			},
			changePage(page){
				this.query.pageIndex = page;
				this.queryCategory();
			},
			changeSize(size){
				this.query.pageSize = size;
				this.queryCategory();
			},
			cancelLoading(name){
		    	this[name].loading = false;
		      	setTimeout(() => {
		      		this[name].loading = true;
		      	})
		    },
		    cancel(name){
		  		this.$refs[name].resetFields();
		  	}
        }
    }
</script>
<style>
    
</style>